<template>
  <div class="cribs">
    <div class="cribs-left">
      <div class="cribs-left-header">
        {{ $t('Folders')}}
        <div class="icons">
          <div class="icon-box">
            <img src="@/assets/cribs-folder.svg" alt="" class="svg-icon height_18px">
          </div>
          <div class="icon-box" @click="handleAddFolder">
            <img src="@/assets/plus.svg" alt="" class="svg-icon height_18px">
          </div>
<!--          <div class="icon-box" @click="handleEditFolder">-->
<!--            <img src="@/assets/settings_flat.svg" alt="" class="svg-icon height_18px">-->
<!--          </div>-->
<!--          <div class="icon-box">-->
<!--            <img src="@/assets/trash_gray.svg" alt="" class="svg-icon height_18px">-->
<!--          </div>-->
        </div>
      </div>
      <div class="cribs-left-body">
        <div class="folder-list">
          <div
              @click="handleSelectedFolder(item)"
              :class="['folder-item', selectedFolder === item.id ? 'active' : '']" v-for="item in folderList" :key="item.id">
            <div class="folder-item-value">
              <div class="folder-name">
                {{ item.name }}
              </div>
              <div class="folder-num">
                {{ item.messageCount }}
              </div>
            </div>
            <div class="icon-box" @click="handleEditFolderItem(item)">
              <img src="@/assets/edit_cribs.svg" alt="" class="svg-icon height_18px">
            </div>
            <div class="icon-box" @click="handleDeleteFolderItem(item)">
              <img src="@/assets/trash_gray.svg" alt="" class="svg-icon height_18px">
            </div>
          </div>
        </div>
<!--        <div class="editor-box" v-if="isEditor">-->
<!--          <div class="editor-button" @click="handleEditorCancel">-->
<!--            <img src="@/assets/cross_blue.svg" alt="" class="svg-icon height_12px">-->
<!--          </div>-->
<!--          <div class="editor-button" @click="handleEditorConfirm">-->
<!--            <img src="@/assets/tick_blue.svg" alt="" class="svg-icon height_12px">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="add-folder" v-else @click="handleAddFolder">-->
<!--          + {{ $t('Add Folder')}}-->
<!--        </div>-->
      </div>
    </div>
    <div class="cribs-middle">
      <div class="header">
        <el-button type="primary" icon="el-icon-delete" :disabled="!unUsedOptions.length" @click="handleDeleteMessage('unUsedOptions')"></el-button>
        <el-button type="primary" icon="el-icon-plus" :disabled="!selectedFolder" @click="handleAddMessageDialog"></el-button>
        <el-button type="primary" icon="el-icon-arrow-right" :disabled="!unUsedOptions.length" @click="handleUpdateMessageStatus('unUsedOptions', true)"></el-button>
      </div>
      <div class="table-wrapper">
        <el-table
            height="100%"
            :data="unUsedList"
            tooltip-effect="dark"
            @selection-change="(options) => unUsedOptions = options"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              type="index"
              label="No"
              width="55">
          </el-table-column>
          <el-table-column
              prop="text"
              label="Unused Messages">
          </el-table-column>
          <el-table-column width="50px">
            <template slot-scope="scope">
              <img @click="handleEditMessageDialog(scope.row)" src="@/assets/edit_cribs.svg" alt="" class="svg-icon height_16px">
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="cribs-right">
      <div class="header">
        <el-button type="primary" icon="el-icon-delete" :disabled="!usedOptions.length" @click="handleDeleteMessage('usedOptions')"></el-button>
        <el-button type="primary" icon="el-icon-arrow-left" :disabled="!usedOptions.length" @click="handleUpdateMessageStatus('usedOptions', false)"></el-button>
      </div>
      <div class="table-wrapper">
        <el-table
            :data="usedList"
            @selection-change="options => usedOptions = options"
            tooltip-effect="dark"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              type="index"
              label="No"
              width="55">
          </el-table-column>
          <el-table-column
              prop="text"
              label="Used Messages">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
        top="30vh"
        :visible.sync="addFolderDialog"
        width="42rem">
      <div class="folder-dialog">
        <div class="folder-form">
          <div class="folder-form-header">
            <div class="folder-form-label">
              {{ folderForm.id ? $t('Edit Folder') : $t('Create Folder') }}
            </div>
            <div class="required" v-show="requiredShow">
              {{ $t('Input is required!') }}
            </div>
          </div>
          <div class="folder-form-input">
            <el-input v-model="folderForm.name"></el-input>
          </div>
        </div>
        <div class="folder-bottom">
          <el-button v-show="!folderForm.id" type="primary" @click="addFolderDialog = false">
            {{ $t('Cancel') }}
          </el-button>
          <el-button type="primary" @click="handleEditorConfirm">
            {{ $t('Save') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        top="30vh"
        :visible.sync="addMessageDialog"
        width="42rem">
      <div class="folder-dialog">
        <div class="folder-form">
          <div class="folder-form-header">
            <div class="folder-form-label">
              {{ messageForm.id ? $t('Edit Message') : $t('Create Message') }}
            </div>
            <div class="required" v-show="requiredShow2">
              {{ $t('Input is required!') }}
            </div>
          </div>
          <div class="folder-form-input">
            <el-input :rows="8" type="textarea" v-model="messageForm.text"></el-input>
          </div>
        </div>
        <div class="folder-bottom">
          <el-button v-show="!messageForm.id" type="primary" @click="addMessageDialog = false">
            {{ $t('Cancel') }}
          </el-button>
          <el-button type="primary" @click="handleMessageConfirm">
            {{ $t('Save') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'cribs',
  data() {
    return {
      folderList: [
      ],
      isEditor: false,
      selectedFolder: '',
      usedList: [
      ],
      unUsedList: [
      ],
      addFolderDialog: false,
      folderForm: {
        id: undefined,
        name: '',
        messageCount: 0
      },
      requiredShow: false,
      // 消息
      addMessageDialog: false,
      requiredShow2: false,
      messageForm: {
        id: undefined,
        text: '',
        used:false
      },
      usedOptions: [],
      unUsedOptions: []
    }
  },
  watch: {
    // 监听folder名称，如果输入为空，显示必填提示，否则隐藏，如果关闭弹窗则隐藏提示
    'folderForm.name'(val) {
      if (!val) {
        this.requiredShow = true
      } else {
        this.requiredShow = false
      }
    },
    // 监听folder名称，如果输入为空，显示必填提示，否则隐藏，如果关闭弹窗则隐藏提示
    'messageForm.name'(val) {
      if (!val) {
        this.requiredShow2 = true
      } else {
        this.requiredShow2 = false
      }
    },
  },
  mounted() {
    this.getFolderList()
  },
  methods: {
    // 获取folder
    getFolderList() {
      this.$http.getFolderList().then(res => {
        this.folderList = res
      })
    },
    handleAddFolder() {
      this.addFolderDialog = true
      this.folderForm = {
        id: undefined,
        name: '',
        messageCount: 0
      }
    },
    // handleEditFolder() {
    //   this.isEditor = true
    // },
    handleSelectedFolder(item) {
      this.selectedFolder = item.id
      // 获取消息
      this.$http.getFolderMessage({
        id: item.id
      }).then(res => {
        this.usedList = res.filter(el => el.used)
        this.unUsedList = res.filter(el => !el.used)
      })
    },
    // 编辑文件夹
    handleEditFolderItem(item) {
      this.folderForm = {
        ...item
      }
      this.addFolderDialog = true
    },
    // 确认编辑文件夹
    handleEditorConfirm() {
      if (this.folderForm.id) {
        this.$http.updateFolder({
          info: {
            folderId: this.folderForm.id,
            name: this.folderForm.name,
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.$t('Success')
          })
          this.getFolderList()
          this.addFolderDialog = false
        })
      } else {
        this.$http.addFolder({
          info: {
            name: this.folderForm.name,
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.$t('Success')
          })
          this.getFolderList()
          this.addFolderDialog = false
        })
      }

    },
    // 删除文件夹
    handleDeleteFolderItem(item) {
      this.$confirm(this.$t('Are you sure to delete this folder?'), '', {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
      }).then(() => {
        this.$http.deleteFolder({
          info: {
            crib_id: item.id
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.$t('Success')
          })
          this.getFolderList()
        })
      }).catch(() => {
      })
    },
    // handleEditorCancel() {
    //   this.isEditor = false
    // },
    // handleEditorConfirm() {
    // },
    /**
     * 消息
     */
    // 新增消息
    handleAddMessageDialog() {
      this.addMessageDialog = true
      this.messageForm = {
        text: '',
        used:false
      }
    },
    handleEditMessageDialog(item) {
      this.addMessageDialog = true
      this.messageForm = {
        ...item
      }
    },
    // 确认新增消息
    handleMessageConfirm() {
      if (this.messageForm.id) {
        this.$http.updateFolderMessage({
          id: this.selectedFolder,
          info: {
            "messageId": this.messageForm.id,
            "text": this.messageForm.text
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.$t('Success')
          })
          this.addMessageDialog = false
          this.handleSelectedFolder({
            id: this.selectedFolder
          })
          this.handleSelectedFolder({id: this.selectedFolder})
        })
      } else {
        this.$http.addFolderMessage({
          id: this.selectedFolder,
          message: [this.messageForm.text]
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.$t('Success')
          })
          this.addMessageDialog = false
          this.handleSelectedFolder({
            id: this.selectedFolder
          })
          this.handleSelectedFolder({id: this.selectedFolder})
        })
      }
    },
    // 删除消息
    handleDeleteMessage(key) {
      const ids = this[key].map(el => el.id)
      if (ids.length) {
        this.$confirm(this.$t('Are you sure to delete this message?'), '', {
          confirmButtonText: this.$t('Confirm'),
          cancelButtonText: this.$t('Cancel'),
        }).then(() => {
          this.$http.deleteFolderMessage({
            id: this.selectedFolder,
            messageIds: ids
          }).then(res => {
            this.$message({
              type: 'success',
              message: this.$t('Success')
            })
            this.handleSelectedFolder({
              id: this.selectedFolder
            })
          })
        }).catch(() => {
        })
      } else {
        this.$message({
          type: 'warning',
          message: this.$t('Please select the message to delete')
        })
      }
    },
    // 消息更改状态-未使用
    handleUpdateMessageStatus(key, used) {
      const ids = this[key].map(el => el.id)
      this.$http.updateFolderMessageStatus({
        id: this.selectedFolder,
        info: {
          messageIds: ids,
          used
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: this.$t('Success')
        })
        this.handleSelectedFolder({
          id: this.selectedFolder
        })
      })
    }

  }
}
</script>
<style lang="scss">
.cribs {
  height: 100%;
  display: grid;
  grid-template-columns: 380fr 808fr 486fr;
  gap: 1.714rem;
  .folder-dialog {
    display: flex;
    flex-direction: column;
    gap: 1.714rem;
    width: 100%;
    height: 100%;
    .folder-form {
      display: flex;
      flex-direction: column;
      gap: min(calc(24 / 14 * 1rem),calc(24 / (900 / 100) * 1vh));
      align-items: flex-start;
      width: 100%;
      padding: 1.714rem;
      border-radius: 1rem;
      background: #0E222E;
      font-family: Inter,sans-serif;
      .folder-form-header {
        width: 100%;
        display: flex;
        align-items: center;
        .folder-form-label {
          color: #ffffff;
          font-size: 1.429rem;
          font-weight: 700;
        }
        .required {
          margin-left: auto;
          color: #fc9ab6;
          font-size: .857rem;
          line-height: 100%;
        }
      }
      .folder-form-input {
        width: 100%;
        .el-textarea__inner,
        .el-input__inner {
          width: 100%;
          border: none;
          border-radius: 0.286rem;
          background: #233645;
          color: #ebebeb;
          font-size: .857rem;
          font-weight: 600;
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
          text-indent: 1.143rem;
        }
      }
    }
    .folder-bottom {
      display: flex;
      gap: 1.214rem;
      .el-button {
        flex: 1
      }
    }
  }
  
  .cribs-left {
    width: 100%;
    height: 100%;
    border-radius: 1.143rem;
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    .cribs-left-header {
      background-color: #122a3a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.857rem 0.857rem 0.857rem 1.714rem;
      border-radius: 0.857rem 0.857rem 0 0;
      color: #fff;
      font-size: 1.143rem;
      font-weight: 700;
    }
    .icons {
      display: flex;
      gap: 0.286rem;
      justify-content: center;
    }
  }

  .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.429rem;
    height: 3.429rem;
    cursor: pointer;
    border: 1px solid rgba(28,114,146,.48);
    border-radius: 0.571rem;
  }
  .cribs-left-body {
    display: grid;
    grid-template-rows: min-content 3.429rem;
    gap: 0.571rem;
    height: calc(calc(100vh - 5.786rem) - 5.143rem);
    padding: 0.571rem 0.857rem 0.571rem 1.714rem;
    border-radius: 0 0 0.857rem 0.857rem;
    background-color: #112939;
    position: relative;
    .folder-list {
      height: calc(100vh - 16.072rem);
      display: flex;
      flex-direction: column;
      gap: 0.571rem;
      padding-right: 0.857rem;
      overflow: auto;
    }
    .folder-item-value {
      display: flex;
      align-items: center;
      border: 1px solid rgba(28,114,146,.24);
      border-radius: 0.857rem;
      color: #97bad1;
      font-size: 1.143rem;
      font-weight: 700;
      line-height: 100%;
      justify-content: space-between;
      width: 100%;
      height: 3.571rem;
      padding: 1.143rem 1.714rem;
      cursor: pointer;
      &:hover {
        border: 1px solid #628196!important;
        background-color: #1a384b!important;
        box-shadow: 0 0.429rem 0.214rem #0000003d;
        transition: .2s ease-in-out;
      }
      .folder-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .folder-num {

      }
      .el-input__inner {
        background: transparent;
        border: none;
        padding: 0;
      }
    }
    .folder-item {
      display: flex;
      align-items: center;
      .icon-box {
        flex-shrink: 0;
        margin-left: 5px;
      }
      &.active {
        border-radius: 0.857rem;
        box-shadow: 0 1.714rem 0.857rem #0000003d;
        .folder-item-value {
          border: 1px solid #1C7292;
        }
        .folder-name {
          color: #c5dae9;
        }
        .folder-num {
          color: #94f4ff;
        }
      }
    }
    .editor-box {
      padding: 0 0.8rem;
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;
      display: flex;
      gap: 0.571rem;
      align-items: center;
      justify-content: center;
      .editor-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 3.429rem;
        cursor: pointer;
        border: 0.063rem solid #1C7292;
        border-radius: 0.857rem;
      }
    }
    .add-folder {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;
      display: flex;
      gap: 0.429rem;
      align-items: center;
      justify-content: center;
      width: 9.786rem;
      height: 3.429rem;
      cursor: pointer;
      border: 0.063rem solid #1C7292;
      border-radius: 0.857rem;
      background-color: #112939;
      color: #fff;
      font-family: Manrope,sans-serif;
      font-size: 1rem;
      font-weight: 600;
      text-align: center;
    }
  }
  .cribs-middle,
  .cribs-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      padding: 0.571rem 0.857rem 0.571rem 1.714rem;
      border-radius: 0 0 0.857rem 0.857rem;
      background-color: #112939;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 5px;
    }
    .table-wrapper {
      flex-grow: 1;
      overflow: hidden;
    }
  }
}
</style>
